<template>
  <div class="navbottom">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="handlerDetail">
          <i class="el-icon-chat-round"></i>
          <span>微信</span>
        </el-menu-item>
        <el-menu-item index="2"><i class="el-icon-phone-outline"></i>通讯录</el-menu-item>
        <el-menu-item index="3"><i class="el-icon-discover"></i>发现</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-user"></i>我</el-menu-item>
      </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      handlerDetail() {
        this.$router.push('/detail')
      }
    }
}
</script>

<style>
.navbottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-weight: 700;
  color: black;
}
.el-menu-item {
  font-size: 15px;
}
.el-menu-demo {
  display: flex;
  justify-content: space-around;
}
.el-menu-demo i {
  display: inline-block;
}
</style>
